<template>
	<view class="uni-column">
		<view class="content" id="content" style="height: 800upx;" >
			<scroll-view id="scrollview" scroll-y="true" style="height: 800upx;"  :scroll-with-animation="true"
			    :scroll-top="scrollTop">
				<view class="cu-chat" id="chatlist">
				<message-show v-for="(message,index) in messages" :key="index" :message="message" :cid="index"></message-show>
				</view>
			</scroll-view>
		</view>
		<view class="foot">
			<chat-input @send-message="getInputMessage" @show="setScrollH" @foc="setScrollH"></chat-input>
		</view>
		
	</view>
</template>
<script>
	import chatInput from '../../components/yszyun-imchat-emoji/chatinput.vue';
	import messageShow from '../../components/yszyun-imchat-emoji/messageshow.vue';
	
	export default {
		data() {
			return {
				name:'xcecd@qq.com',
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0,
				},
				scrollTop: 0,
				messages: [{
					user: 'home',
					type: 'head', //input,content 
					content: '你好!'
				}]
			}
		},
		components: {
			chatInput,
			messageShow
		},
		onLoad: function () {
			const res = uni.getSystemInfoSync();
			this.style.pageHeight = res.windowHeight;
			this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) ; //像素
			//console.log(res)
		},
		methods: {
			getInputMessage: function (message) { //获取子组件的输入数据
				console.log(message);
				this.addMessage('customer', message.content, false);
				// this.addMessage('user', message.content, false);
				// this.toRobot(message.content);
				this.addMessage('home', 'sdf', false);
				this.setScrollH();
			},
			addMessage: function (user, content, hasSub, subcontent) {
				var that = this;
				content = 
				that.messages.push({
					user: user,
					content: content,
					hasSub: hasSub,
					subcontent: subcontent
				});
				console.log(content)
				this.scrollToBottom();
			},
			scrollToBottom: function () {
				var that = this;
				// console.log(this.scrollTop)
				
				this.$nextTick(function() {
					this.scrollTop += 133; 
				});
				// console.log(this.scrollTop)

			},
		 
			// 设置高度 用emit辅助
			setScrollH: function(){
				var query = uni.createSelectorQuery();
				let footh = query.select('.foot');
				//console.log('fh',footh);
				const res = uni.getSystemInfoSync();
				this.style.pageHeight = res.windowHeight;
				this.$nextTick(function(){
					footh.fields({
						size: true
					}, data => {
						footh = data.height;
						console.log('fh',data.height);
						this.style.contentViewHeight = res.windowHeight -footh ; //像素
					}).exec();	
					// console.log('contentViewHeight',this.style.contentViewHeight);
				})	
			}
		}
	}
</script>

<style scoped>
	
	
	.uni-column {
		display: flex;
		flex-direction: column;
	}

	.content {

		display: flex;
		flex: 1;
		/* margin-bottom: 100upx; */
	}

	.foot {
		position: fixed;
		width: 100%;
		/* height: 90upx;
		min-height: 90upx; */
		height: auto;
		left: 0upx;
		bottom: 0;
		overflow: hidden;
	}
</style>